<template>
	<view class="course-card">
		<view class="course-header">
			<image class="avatar" :src="avatar" v-if="avatar" />
			<text class="series-title">{{ series }}</text>
		</view>
		<view class="course-img-box" @click="handleImgClick">
			<image class="course-img" :src="img" />
		</view>
		<view class="course-footer">
			<view>
				<text class="course-title">{{ title }}</text>
				<text class="course-price" v-if="price">￥{{ price }}</text>
			</view>
			<view class="buy-btn" v-if="source === 'purchased'" @click.stop="handleStudy">
				立即观看
			</view>
			<view v-else class="buy-btn" @click.stop="handleBuy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'CourseCard',
		props: {
			courseId: Number,
			img: String,
			title: String,
			series: String,
			price: [Number, String],
			status: {
				type: String,
				default: 'unpurchased' // 'unpurchased' | 'purchased'
			},
			avatar: String,
			source: String
		},
		methods: {
			handleBuy(e) {
				this.$emit('buy', e)
			},
			handleStudy(e) {
				this.$emit('study', e)
			},
			handleImgClick(e) {
				this.$emit('imgClick', e)
			}
		}
	}
</script>

<style scoped>
	.course-card {
		background: #fff;
		border-radius: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
		margin-bottom: 32rpx;
		padding: 24rpx;
	}

	.course-header {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 12rpx;
		background: #eee;
	}

	.series-title {
		font-size: 28rpx;
		color: #333;
	}

	.course-img-box {
		position: relative;
		width: 100%;
		height: 220rpx;
		margin-bottom: 16rpx;
		border-radius: 16rpx;
		overflow: hidden;
		background: #dbeafe;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.course-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.play-btn {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: rgba(0,0,0,0.3);
		border-radius: 50%;
		padding: 12rpx 12rpx 12rpx 18rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.course-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.course-title {
		font-size: 28rpx;
		color: #333;
	}

	.course-price {
		font-size: 28rpx;
		color: #ff3b30;
		margin-left: 16rpx;
	}

	.buy-btn {
		background: #2d5aff;
		color: #fff;
		border-radius: 24rpx;
		font-size: 24rpx;
		/* padding: 8rpx 32rpx;
		margin-left: 16rpx; */
		width: 70px;
		height: 24px;
		line-height: 24px;
		text-align: center;
	}
</style>